<template>
	<a-layout id="components-layout-demo-fixed" style="position: relative">
		<a-layout-header class="header flex flex-align-center flex-pack-justify">
			<div class="logo flex">
				<div class="flex flex-align-center">
					<div v-if="systemInfo.logUrl" style="margin-right: 10px">
						<img :src="fileUrl + systemInfo.logUrl.split(';')[0]" class="logo-img" />
					</div>
					<a-dropdown v-if="orgList.length > 1">
						<div @click="(e) => e.preventDefault()" class="flex flex-align-center">
							<span class="sys-name">{{ systemInfo.sysName || systemInfo.orgName + title }}</span>
							<a-icon type="caret-down" style="margin-left: 10px" />
						</div>
						<a-menu slot="overlay" style="max-height: 400px; overflow: auto">
							<a-menu-item @click="changeOrg(item)" v-for="(item, index) in orgList" :key="index">
								<div class="flex flex-align-center">
									<div
										v-if="item.logUrl"
										style="
											height: 30px;
											width: 30px;
											border-radius: 100%;
											overflow: hidden;
											margin-right: 5px;
										"
									>
										<img :src="fileUrl + item.logUrl.split(';')[0]" style="width: 30px" />
									</div>
									<div>{{ item.sysName || item.orgName + title }}</div>
								</div>
								<div style="color: #999; font-size: 12px">{{ item.orgName }}</div>
							</a-menu-item>
						</a-menu>
					</a-dropdown>
					<div v-else class="flex flex-align-center">
						<span class="sys-name">{{ systemInfo.sysName || systemInfo.orgName + title }}</span>
					</div>
				</div>
				<div class="mod-name flex flex-align-center">
					<img src="/img/module.png" />
					<span>{{ selectRoute ? selectRoute.meta.title : '首页' }}</span>
				</div>
			</div>
			<div class="right-pro flex flex-align-center">
				<a-space :size="30" style="margin-right: 30px">
					<router-link
						v-if="$_has('dashboard:classboard')"
						to="/dashboard/classboard"
						class="flex flex-align-center"
						style="color: #fff; font-size: 18px"
						><!-- <img src="/count/school.png" alt="" srcset="" style="width: 24px; margin-right: 5px" /> -->
						<span>班级看板</span></router-link
					>
					<router-link
						v-if="$_has('dashboard:workplace')"
						to="/dashboard/workplace"
						class="flex flex-align-center"
						style="color: #fff; font-size: 18px"
					>
						<!-- <img src="/count/school.png" alt="" srcset="" style="width: 24px; margin-right: 5px" /> -->
						<span>学校看板</span></router-link
					>
					<router-link
						v-if="$_has('dashboard:platform')"
						to="/dashboard/platform"
						style="color: #fff; font-size: 18px"
						class="flex flex-align-center"
					>
						<!-- <img
							src="/count/platform.png"
							alt=""
							srcset=""
							style="width: 24px; margin-right: 5px"
						/> --><span>数据中心</span></router-link
					>
					<router-link
						v-if="$_has('dashboard:device')"
						to="/dashboard/device"
						style="color: #fff; font-size: 18px"
						class="flex flex-align-center"
						><!-- <img src="/count/device.png" alt="" srcset="" style="width: 20px; margin-right: 5px" /> -->
						<span>设备看板</span></router-link
					>
				</a-space>
				<div class="userInfo flex">
					<a-dropdown placement="bottomRight">
						<a href="javascript:;" class="flex flex-align-center re-home">
							<img src="/img/download.png" />
							<span class="username">
								下载
								<a-icon type="down" />
							</span>
						</a>
						<a-menu slot="overlay">
							<a-menu-item>
								<a href="/sdk.zip" download="sdk.zip" target="_blank">
									<span>windows SDK下载</span>
									<span>（版本1.0.46）</span>
								</a>
							</a-menu-item>
							<a-menu-item>
								<a href="/ZKXL_SDK.zip" download="ZKXL_SDK.zip" target="_blank">
									<span>Mac SDK下载</span>
									<span>（版本1.0.46）</span>
								</a>
							</a-menu-item>
							<!-- <a-menu-item v-if="hostname && hostname == 'zdx.zkxltech.com'">
								<a href="/智能速答系统平台用户操作说明v1.0.4.docx" download="智能速答系统平台用户操作说明v1.0.4.docx" target="_blank">
									<span>智能速答系统平台用户操作说明</span>
									<span>（版本1.0.4）</span>
								</a>
							</a-menu-item>
							<a-menu-item v-if="hostname">
								<a href="/智答星AI教学演示系统操作说明v1.0.5.docx" download="智答星AI教学演示系统操作说明v1.0.5.docx" target="_blank">
									<span>智答星AI教学演示系统操作说明</span>
									<span>（版本1.0.5）</span>
								</a>
							</a-menu-item> -->
						</a-menu>
					</a-dropdown>

					<a-dropdown class="ml50" placement="bottomRight">
						<a href="javascript:;">
							<img src="/img/avatar.png" class="avatar" />
							<span class="username">
								{{ userInfo.realName }}
								<a-icon type="down" />
							</span>
						</a>
						<a-menu slot="overlay" class="user-dropdown-menu-wrapper">
							<a-menu-item key="1">
								<router-link to="/userinfo"><span>个人信息</span></router-link>
							</a-menu-item>
							<a-menu-divider />
							<a-menu-item key="4">
								<a href="javascript:;" @click="handleLogout()"><span>退出登录</span></a>
							</a-menu-item>
						</a-menu>
					</a-dropdown>
				</div>
			</div>
		</a-layout-header>
		<a-layout-content style="position: absolute; top: 60px; left: 0; right: 0; bottom: 0">
			<div class="flex flex-v pro-grid-content" style="background-color: #f6f8fb">
				<div style="height: calc(100vh - 60px); overflow: auto; padding-bottom: 35px" class="content">
					<div class="mainWidth" style="margin: 0 auto; transition: all 0.2s ease 0s"><router-view /></div>
				</div>
			</div>
		</a-layout-content>
	</a-layout>
</template>

<script>
import { i18nRender } from '@/locales';
import { mapState, mapActions, mapMutations } from 'vuex';
import defaultSettings from '@/config/defaultSettings';
import RouteView from './RouteView';
import { sysManageapi, upLoginCache } from '@/api/index.js';
export default {
	name: 'HomeLayout',
	components: {
		RouteView,
	},
	data() {
		return {
			// preview.pro.antdv.com only use.
			isProPreviewSite: process.env.VUE_APP_PREVIEW === 'true' && process.env.NODE_ENV !== 'development',
			// end
			isDev: process.env.NODE_ENV === 'development' || process.env.VUE_APP_PREVIEW === 'true',

			// base
			menus: [],
			// 侧栏收起状态
			collapsed: false,
			title: defaultSettings.title,
			// userInfo: {},
			fileUrl: process.env.VUE_APP_FILE_API,
			orgList: [], //该账户所属机构
			selectRoute: null,
		};
	},
	computed: {
		...mapState({
			// 动态主路由
			mainMenu: (state) => state.permission.routers,
			activePage: (state) => state.activePage,
			userInfo: (state) => state.user.userinfo || {},
			systemInfo: (state) => state.globalOrg || {},
			hostname: (state) => state.hostname,
			isPro: (state) => state.isPro,
		}),
	},
	watch: {
		activePage(newval, oldval) {
			console.log('当前菜单' + JSON.stringify(this.activePage));
			this.selectRoute = this.activePage
				? this.mixTopMenu.filter((item) => item.name == this.activePage)[0]
				: null;
			console.log('当前路由' + JSON.stringify(this.selectRoute));
			console.log('模块菜单' + JSON.stringify(this.mixTopMenu));
			//let secondMenus=this.activePage?this.mixTopMenu.filter(item=>item.name==this.activePage)[0].children:[];
			//清除二级菜单选中key
			this.$ls.set('secondselectKey', '');
			if (newval != oldval) {
			}
		},
	},
	created() {
		this.getAllMenu();
		this.getUserInfo();
	},
	mounted() {},
	methods: {
		...mapActions(['Logout', 'GetInfo']),
		...mapMutations(['SET_GLOBALORG']),
		i18nRender,
		//获取所有菜单
		getAllMenu() {
			/* 获取路由 */
			this.menus = [...this.mainMenu];
			this.mixTopMenu = this.mainMenu.filter((item) => !item.hidden && item.meta.title != '首页');
			/* 如果没有菜单。提示账户没有权限 */
			if (this.menus.length == 0) {
				this.$message.error('你还没有分配权限，请联系管理员');
			}
		},
		getUserInfo() {
			this.$postAction(this.$api.getUserInfo).then((da) => {
				let data = da.data;
				this.$ls.set('userInfo', data);
				this.GetInfo(data);
				this.getAllOrgList();
			});
		},
		//获取所有机构
		getAllOrgList() {
			this.$postAction(sysManageapi.orgUrl.getAllList).then((da) => {
				let data = da.data;
				this.orgList = [...da.data];
				/* 如果时运营账户，取账户所在的机构 */
				if (this.userInfo.userType == '06') {
					let info = this.orgList.find((item) => item.orgId == this.userInfo.orgId);
					this.SET_GLOBALORG(info || this.orgList[0]);
				} else {
					// this.systemInfo = this.orgList[0];
					if (!this.systemInfo || Object.keys(this.systemInfo).length == 0) {
						this.SET_GLOBALORG(this.orgList[0]);
					} else {
						let info = this.orgList.find((item) => item.orgId == this.systemInfo.orgId);
						this.SET_GLOBALORG(info || this.orgList[0]);
					}
				}
			});
		},
		//退出
		handleLogout() {
			let $me = this;
			this.$confirm({
				title: '你确定要退出吗？',
				content: '',
				okText: '确定',
				cancelText: '取消',
				class: 'confirmbox',
				okType: 'danger',
				onOk() {
					/* 退出，清空token就可以 */
					$me.Logout().then(() => {
						// $me.$router.push({
						// 	path: '/user/login'
						// });
						/* 刷新页面，清除tore */
						window.location.reload();
					});
				},
				onCancel() {
					console.log('Cancel');
				},
			});
		},
		navTo() {
			this.$router.push({
				path: '/userinfo',
			});
		},
		/* 切换机构 */
		changeOrg(item) {
			// this.systemInfo = { ...item };
			upLoginCache(item.orgId)
				.then((da) => {
					this.SET_GLOBALORG(item);
				})
				.finally(() => {});

			// this.getAllMenu();
		},
	},
};
</script>
<style scoped lang="less">
/deep/.left-menu {
	width: 160px;
	display: inline-block;
	margin: 15px 0;
	overflow: auto;
	ul {
		width: 125px;
		background-color: #fff;
		border-radius: 8px;
		margin-left: 21px;
		padding: 23px 0;
		box-shadow: 0px 4px 8px rgba(19, 29, 53, 0.02);
		li {
			display: inline-block;
			width: 100%;
			text-align: center;
			a {
				display: inline-block;
				color: #2e2424;
				font-size: 16px;
				width: 75px;
				height: 36px;
				line-height: 36px;
				border-radius: 4px;
			}
			a.active {
				background-color: @primary-color;
				color: #fff;
			}
			& + li {
				margin-top: 10px;
			}
		}
	}
}
/deep/.ant-layout {
	background: transparent !important;
}
.mainWidth {
	width: 1440px;
	//margin: 0 auto;
	@media screen and (max-width: 1680px) {
		width: 1200px;
	}
}
.header {
	position: fixed;
	z-index: 999;
	width: 100%;
	background: @primary-color;
	padding: 0 25px;
	// -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
	// box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
	ul.navs {
		margin: 0 auto;
		max-width: 1440px;
		height: 60px;
		text-align: center;
		padding-left: 0;
		li {
			float: left;
			display: inline-block;
			height: 100%;
			line-height: 60px;
			text-decoration: none;
			/* border-bottom: 3px solid transparent; */
			color: #fff;
			a {
				display: inline-block;
				height: 100%;
				line-height: 60px;
				padding: 0 20px 0 20px;
				text-decoration: none;
				font-size: 18px;
				// border-bottom: 3px solid transparent;
				color: #fff;
			}
		}
		li a.active {
			//background: #01a8ae;
			background: #5677f5;
			color: #fff;
		}
	}
}

.head-menu {
	// width: 800px;
	text-align: center;
	margin: 0 auto;
	line-height: 64px;
}

.right-pro {
	.re-home {
		color: #fff;
		// margin-left: 88px;
		cursor: pointer;
		img {
			width: 26px;
			height: 23px;
			margin-top: -3px;
		}
		i {
			font-size: 14px !important;
			vertical-align: -0.22em;
		}
		span {
			margin-left: 7px;
		}
	}
	/deep/.userInfo {
		.avatar {
			width: 28px !important;
			height: 28px !important;
			border-radius: 50%;
			// background: #fff;
			border: 1px solid @primary-color;
			cursor: pointer;
			i {
				color: @primary-color;
			}
			&.bg {
				//background: url('../assets/images/home/touxiang.jpg') center center no-repeat;
				background-size: 100% auto;
			}
		}
		.username {
			color: #fff;
			margin-left: 10px;
		}
	}
}

/deep/.logo {
	color: #fff;
	.logo-img {
		height: 36px;
		width: auto;
		margin-top: -3px;
	}
	.sys-name {
		color: #fff;
		font-size: 18px;
		margin-left: 7px;
	}
	.mod-name {
		color: #fff;
		margin-left: 88px;
		cursor: pointer;
		img {
			width: 26px;
			height: 23px;
		}
		i {
			font-size: 24px;
			vertical-align: -0.22em;
		}
		span {
			margin-left: 7px;
			font-size: 18px;
		}
	}
}
.ml50 {
	margin-left: 50px;
}
/* 底部样式 */
/deep/.ant-layout-footer {
	padding: 0;
}
</style>
